<template>
  <div style="margin-top: -40px;">
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
    <el-step title="字段信息" />
    <el-step title="基本信息" />
    <el-step title="生成信息" />
  </el-steps>
    <div  v-if="active==0">
        <el-table ref="dragTable" :data="columns"  v-loading="loading"
    :element-loading-svg="svg"
    class="custom-loading-svg"
    element-loading-svg-view-box="-10, -10, 50, 50"   row-key="columnId" :max-height="tableHeight" style="margin-top: 20px;">
          <el-table-column label="序号" type="index" min-width="5%" width="60px" class-name="allowDrag" />
          <el-table-column
            label="字段列名"
            prop="columnName"
            min-width="10%"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="字段描述" min-width="10%">
            <template #default="scope">
              <el-input v-model="scope.row.columnComment"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="物理类型"
            prop="columnType"
            min-width="10%"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="Java类型" min-width="11%">
            <template #default="scope">
              <el-select v-model="scope.row.javaType">
                <el-option label="Long" value="Long" />
                <el-option label="String" value="String" />
                <el-option label="Integer" value="Integer" />
                <el-option label="Double" value="Double" />
                <el-option label="BigDecimal" value="BigDecimal" />
                <el-option label="Date" value="Date" />
                <el-option label="Boolean" value="Boolean" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="java属性" min-width="10%">
            <template #default="scope">
              <el-input v-model="scope.row.javaField"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="插入" min-width="5%">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="编辑" min-width="5%">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="列表" min-width="5%">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="查询" min-width="5%">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="查询方式" min-width="10%">
            <template #default="scope">
              <el-select v-model="scope.row.queryType">
                <el-option label="=" value="EQ" />
                <el-option label="!=" value="NE" />
                <el-option label=">" value="GT" />
                <el-option label=">=" value="GTE" />
                <el-option label="<" value="LT" />
                <el-option label="<=" value="LTE" />
                <el-option label="LIKE" value="LIKE" />
                <el-option label="BETWEEN" value="BETWEEN" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="必填" min-width="5%">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="显示类型" min-width="12%">
            <template #default="scope">
              <el-select v-model="scope.row.htmlType">
                <el-option label="文本框" value="input" />
                <el-option label="文本域" value="textarea" />
                <el-option label="下拉框" value="select" />
                <el-option label="单选框" value="radio" />
                <el-option label="复选框" value="checkbox" />
                <el-option label="日期控件" value="datetime" />
                <el-option label="图片上传" value="imageUpload" />
                <el-option label="文件上传" value="fileUpload" />
                <el-option label="富文本控件" value="editor" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典类型" min-width="12%">
            <template #default="scope">
              <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                <el-option
                  v-for="dict in dictOptions"
                  :key="dict.dictType"
                  :label="dict.dictName"
                  :value="dict.dictType">
                  <span style="float: left">{{ dict.dictName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
              </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else-if="active==1">
        <basic-info-form ref="basicInfo" :info="info"  style="margin-top: 20px;"/>
      </div>
      
      <div v-else-if="active==2">
        <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"  style="margin-top: 20px;"/>
      </div>

    <el-form label-width="100px">
      <!-- <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item> -->
    </el-form>
    <div  class="dialog-footer" style="position: absolute;bottom: 0;right: 0;margin-bottom: 20px;margin-right: 20px;">
        <el-button  @click="rnext" v-if="active!=0">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-back'"/>
          上一步</el-button>
        <el-button  @click="next"  v-if="active!=2">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-next'"/>
          下一步</el-button>
        
        <el-button type="primary" @click="submitForm" :size="size" v-else-if="active==2">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-correct'"/>
          确 定</el-button>
        <el-button @click="handleBack" :size="size">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-return'"/>
          取 消</el-button>
      </div>
    </div>
</template>

<script>
import { getGenTable, updateGenTable } from "@/api/tool/gen";
import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
import { listMenu as getMenuTreeselect } from "@/api/system/menu";
import { computed, ref ,reactive,onMounted,getCurrentInstance,toRefs,nextTick} from 'vue'
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import basicInfoForm from "./basicInfoForm.vue";
import genInfoForm from "./genInfoForm.vue";
// import Sortable from 'sortablejs'

export default defineComponent({
  name: "GenEdit",
  components: {
    basicInfoForm,
    genInfoForm
  },
  props:{
    tableId:{
      type:Number
    },
    pageNum:{
      type:Number
    }
  },
  setup(props,context){
  const { proxy } = getCurrentInstance();//关键代码
  const queryForm=ref(null)
  const formDataRef=ref(null)
  const basicInfo=ref(null)
  const genInfo=ref(null)
  const dragTable=ref(null)
  
  const { t } = useI18n();
  const store = useStore();
  const staticData=reactive({
      active:0,
      // 选中选项卡的 name
      activeName: "columnInfo",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表信息
      tables: [],
      // 表列信息
      columns: [],
      // 字典信息
      dictOptions: [],
      // 菜单信息
      menus: [],
      // 表详细信息
      info: {},
      loading:false,
      isbasicInfo:false,
      isgenInfo:false,
      svg :`
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
  })
  const size = computed(() => {
        return store.getters['setting/size'];
  });

  const small =computed(() => {
    return size.value=='small'?true:false
  });
  onMounted(() => {
    const tableId = props.tableId
    staticData.loading=true
    if (tableId) {
      // 获取表详细信息
      getGenTable(tableId).then(res => {
        staticData.columns = res.data.rows;
        staticData.info = res.data.info;
        staticData.tables = res.data.tables;
        staticData.loading=false
      });
      /** 查询字典下拉列表 */
      getDictOptionselect().then(response => {
        staticData.dictOptions = response.data;
      });
      /** 查询菜单下拉列表 */
      getMenuTreeselect().then(response => {
        staticData.menus = proxy.$handleTree(response.data, "menuId");
      });
    }
    // const el =dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
    // const sortable = Sortable.create(el, {
    //   handle: ".allowDrag",
    //   onEnd: evt => {
    //     const targetRow = staticData.columns.splice(evt.oldIndex, 1)[0];
    //     staticData.columns.splice(evt.newIndex, 0, targetRow);
    //     for (let index in staticData.columns) {
    //       staticData.columns[index].sort = parseInt(index) + 1;
    //     }
    //   }
    // });
  })

  const methods={
    async next() {
      if(staticData.active==1){
        const result = await basicInfo.value.validates();
        //console.log(result,'================')
        if(!result){
          return
        }
        
        }
      if (staticData.active++ > 2){
       
      }
    },
    rnext() {
      
      if (staticData.active-- > 0){}
    },
    tabClick(tab){
      if(tab.props.name=="basic"){
        staticData.isbasicInfo=true
        staticData.isgenInfo=false
      }else if(tab.props.name=="genInfo"){
        staticData.isgenInfo=true
        staticData.isbasicInfo=false
      }else{
        staticData.isbasicInfo=false
        staticData.isgenInfo=false
      }
    },
    /** 提交按钮 */
    async submitForm() {
      const result = await genInfo.value.validates();
        //console.log(result,'================')
        if(result){
          // const genInfodata= await genInfo.value.modeldata()
          // const basicInfodata= await basicInfo.value.modeldata()
          console.log('+++++++++++++++++++++',staticData.info)
          const genTable = staticData.info
          console.log(genTable,'+++++++++++++++++++++')
          genTable.columns = staticData.columns;
          genTable.params = {
            treeCode: genTable.treeCode,
            treeName: genTable.treeName,
            treeParentCode: genTable.treeParentCode,
            parentMenuId: genTable.parentMenuId
          };
          updateGenTable(genTable).then(res => {
            proxy.Success(res.msg);
            if (res.code === 200) {
              staticData.active=0
              context.emit("handleSuccess");
            }
          })
                   
        }
    },
    getFormPromise(form) {
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res);
        });
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: props.pageNum } };
      proxy.$tab.closeOpenPage(obj);
    },
    /** 取消按钮操作 */
    handleBack(){
      staticData.active=0
      context.emit("handleBack");
    },
  }
  return {
      size,
      small,
      dragTable,
      queryForm,
      basicInfo,
      genInfo,
      formDataRef,
      ...methods,
      ...toRefs(staticData)
    }
  }

})
</script>
<style scoped>
 :deep(.el-drawer__body) {
  padding: 0 !important;
}
</style>